<template>
	<view class="content">
		<view class="head">
			<button class="ss-reset-button ut-registe-back" @tap="onBack">
				<uni-icons class="ut-back-icon" type="left" size="20" color="#000" />
			</button>
			<view class="ut-welcome-text">
				<view>Hello!</view>
				<view>Register to get started</view>
			</view>
		</view>
		<view class="form-box">
			<view class="form">
				<view
					v-for="item in items"
					:key="item.field"
					:class="{'row-input-focus': focus === item.field}"
					class="row-input"
				>
					<view class="row-img">
						<uni-icons
							custom-prefix="ucon"
							:type="`ucon-${item.icon}`"
							size="30"
							:color="focus === item.field ? '#EA0D2C' : '#dadada'"
						/>
					</view>
					<uni-easyinput
						v-model="data[item.field]"
						:placeholder="$t('app.please')+item.title"
						:inputBorder="false"
						maxlength="64"
						primaryColor="#EA0D2C"
						focus
						@focus="onFocus(item.field)"
					/>
					<text class="row-lable">{{ item.title }}</text>
				</view>

				<!-- <view class="row-input" :class="{'row-input-focus': focus === 'userAccount'}">
					<view class="row-img">
						<uni-icons custom-prefix="ucon" type="ucon-mine" size="30" :color="focus === 'userAccount' ? '#EA0D2C' : '#dadada'" />
					</view>
					<uni-easyinput
						v-model="data.userAccount"
						:inputBorder="false"
						:placeholder="$t('app.please')+$t('app.account')"
						maxlength="18"
						@focus="onFocus('userAccount')"
					/>
					<text class="row-lable">{{ $t("app.account") }}</text>
				</view> -->
				<!-- <view class="row-input" :class="{'row-input-focus': focus === 'email'}">
					<view class="row-img">
						<uni-icons custom-prefix="ucon" type="ucon-email" size="30" :color="focus === 'email' ? '#EA0D2C' : '#dadada'" />
					</view>
					<uni-easyinput
						v-model="data.email"
						:inputBorder="false"
						:placeholder="$t('app.please')+$t('app.email')"
						maxlength="18"
						@focus="onFocus('email')"
					/>
					<text class="row-lable">{{ $t("app.email") }}</text>
				</view>
				<view class="row-input" :class="{'row-input-focus': focus === 'phone'}">
					<view class="row-img">
						<uni-icons custom-prefix="ucon" type="ucon-phone" size="30" :color="focus === 'phone' ? '#EA0D2C' : '#dadada'" />
					</view>
					
					<uni-easyinput
						v-model="data.phone"
						:inputBorder="false"
						:placeholder="$t('app.please')+$t('app.phone')"
						maxlength="18"
						@focus="onFocus('phone')"
					/>
					<text class="row-lable">{{ $t("app.phone") }}</text>
				</view> -->
				<!-- <view class="row-input">
					<view class="row-img">
						<uni-icons custom-prefix="ucon" type="ucon-password" size="30" color="#EA0D2C" />
					</view>
					<input :placeholder="$t('app.password')" maxlength="12" />
					<text class="row-lable">{{ $t("app.password") }}</text>
				</view> -->
				<view class="login-btn" @tap="onRegister">{{ $t("app.register") }}</view>
			</view>
		</view>
		<su-popup 
			:show="show" 
			isMaskClick
			type="center"
			round="10"
			class="ut-popup"
			@close="show = false"
		>
			<view class="ut-popup-wrapper">
				<view class="ut-popup-title">{{ $t("tip.registerSuccess") }}</view>
				<view class="ut-popup-body">
					<text>{{ $t("tip.initPassword") }}</text>
					<text class="password" style="font-weight: 700;">111111</text>
				</view>
				<view class="ut-popup-bottom">
					<button class="ss-reset-button" @tap="toLogin">{{ $t("app.goLogin") }}</button>
				</view>
			</view>
		</su-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { ajax } from '@/http';

const data = ref({
	tenantId:null,
	userName:'',
	userAccount:'',
	status:1,
	phone:'',
	email:'',
	authType:1,
	sex:1,
	password:'111111',
	accountType: 'E'
})

const show = ref(false)
const focus = ref("")
const { t } = useI18n()
const onFocus = (field) => {
	focus.value = field
}

const onRegister = () => {
	console.log("res", ajax, data.value)
	ajax.post("/nature-core/api/nt/account/insert_user", data.value).then(() => {
		uni.showToast({
			title: this.$t("tip.registerSuccess"),
			icon: 'success',
			mask: true
		})
	})
}

const toLogin = () => {
	uni.redirectTo({ url: '/pages/login/login' })
}

const items = [
	{ field: "username", title: t("app.userName"), icon: "mine"},
	{ field: "userAccount", title: t("app.account"), icon: "mine"},
	{ field: "email", title: t("app.email"), icon: "email"},
	{ field: "phone", title: t("app.phone"), icon: "photo"}
]

const onBack = () => {
	console.log('.....')
	uni.navigateBack({ delta: 1 })
}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.head {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-top:64rpx;
			height: 20h;
			padding-left: 36rpx;
			padding-bottom: 48rpx;
			.ut-registe-back {
				background-color: transparent;
				display: initial;
				padding: 0;
				margin: 0;
				width: 120rpx;
				height: 120rpx;
				text-align: left;
				.ut-back-icon {
					border: 1px solid #666;
					border-radius: 10rpx;
					padding: 12rpx;
					font-weight: 700;
				}
			}
			.uni-button:after {
				width: 120rpx;
				height: 120rpx;
				border: none
			}
			.ut-welcome-text {
				font-size: 52rpx;
				font-weight: bolder;
			}
		}

		.form-box {
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			// height: 70vh;

			.form {
				z-index: 2;
				position: absolute;

				.row-input {
					position: relative;
					margin: 25rpx 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 660rpx;
					height: 100rpx;
					border: 4rpx solid #dadada;
					border-radius: 24rpx;

					.row-img {
						margin-right: 30rpx;
						padding-left: 10rpx;
						width: 100rpx;
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-right: 4rpx solid #dadada;
					}

					.row-lable {
						position: absolute;
						width: 160rpx;
						display: block;
						left: 120rpx;
						top: -20rpx;
						font-size: 26rpx;
						text-align: center;
						color: #666;
						font-weight: 700;
						background-color: #FFFFFF;
					}

				}
				.row-input-focus {
					border-color: #EA0D2C;
					.row-img {
						border-right-color: #EA0D2C;
					}
					.row-lable {
						color: #EA0D2C;
					}
					input {
						color: #EA0D2C;
					}
				}

				.login-btn {
					margin-top: 48rpx;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100rpx;
					border-radius: 24rpx;
					font-size: 30rpx;
					background: #EA0D2C;
					letter-spacing: 2rpx;
					color: #FFF;
					font-weight: bold;
				}
			}
		}
	}
	.ut-popup {
		:deep() {
			.uni-popup__wrapper {
				width: 75%;
			}
		}
		&-wrapper {
			position: relative;
			// height: 360rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.ut-popup-title {
				padding: 24rpx 0;
				font-weight: 700;
			}
			.ut-popup-body {
				padding: 36rpx;
				flex: 3;
				display: flex;
				align-items: center;
			}
			.ut-popup-bottom {
				// position: absolute;
				// bottom: 0;
				text-align: center;
				width: 100%;
				padding: 12rpx 0;
				border-top: 1px solid #999;
				box-sizing: border-box;
			}
		}
	}
	.ss-reset-button {
		.uni-button:after {
			border: none !important;
		}
	}
</style>